<template>
  <div 
    :class="[
      theme === 'classic' ? 'markdown-classic' : 'markdown-renderer',
      theme === 'minimal' ? 'theme-minimal' : '',
      { 'dark-mode': isDark }
    ]"
    v-html="renderedHtml"
  />
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css'

export type MarkdownTheme = 'minimal' | 'classic'

interface Props {
  content: string
  theme?: MarkdownTheme
  options?: {
    gfm?: boolean
    breaks?: boolean
    sanitize?: boolean
  }
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  theme: 'classic',
  options: () => ({
    gfm: true,
    breaks: true,
    sanitize: true
  })
})

// 深色模式检测
const isDark = ref(false)

// 检测深色模式
const checkDarkMode = () => {
  const html = document.documentElement
  isDark.value = html.classList.contains('dark')
}

// 监听深色模式变化
const observeDarkMode = () => {
  const html = document.documentElement
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        checkDarkMode()
      }
    })
  })
  
  observer.observe(html, {
    attributes: true,
    attributeFilter: ['class']
  })
  
  return observer
}

let darkModeObserver: MutationObserver | null = null

onMounted(() => {
  checkDarkMode()
  darkModeObserver = observeDarkMode()
})

onUnmounted(() => {
  if (darkModeObserver) {
    darkModeObserver.disconnect()
  }
})

// 渲染markdown内容
const renderedHtml = computed(() => {
  if (!props.content) return '<p class="empty-content">暂无内容</p>'
  
  try {
    // 创建自定义渲染器
    const renderer = new marked.Renderer()

    // 覆写链接渲染方法，使所有链接在新窗口打开
    renderer.link = function(token) {
      const html = marked.Renderer.prototype.link.call(this, token)
      return html.replace('<a ', '<a target="_blank" rel="noopener noreferrer" ')
    }

    // 覆写标题渲染方法，为标题添加id属性
    renderer.heading = function(token) {
      const level = token.depth
      const text = token.text
      const anchor = text
        .toLowerCase()
        .replace(/[^\u4e00-\u9fa5a-z0-9\s]/g, '') // 保留中文、英文、数字和空格
        .replace(/\s+/g, '-') // 空格替换为连字符
        .trim()

      const id = anchor || `heading-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
      return `<h${level} id="${id}">${text}</h${level}>`
    }

    // 覆写代码块渲染方法，添加语法高亮
    renderer.code = function(token) {
      const code = token.text
      const lang = token.lang || 'plaintext'

      try {
        const language = hljs.getLanguage(lang) ? lang : 'plaintext'
        const highlighted = hljs.highlight(code, { language }).value
        return `<pre><code class="hljs language-${lang}">${highlighted}</code></pre>`
      } catch (error) {
        // 如果高亮失败，返回原始代码
        return `<pre><code>${code}</code></pre>`
      }
    }
    
    // 配置marked
    marked.setOptions({
      gfm: props.options.gfm,
      breaks: props.options.breaks,
      renderer: renderer
    })
    
    const result = marked.parse(props.content)
    return result
  } catch (error) {
    console.error('Markdown渲染失败:', error)
    return `<p class="error-content">Markdown渲染失败: ${String(error)}</p>`
  }
})
</script>

<style scoped>
/* 基础样式 */
.markdown-renderer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  background: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============ 默认主题 ============ */
.markdown-renderer.theme-default {
  color: #2c3e50;
}

/* ============ GitHub 主题 ============ */
.markdown-renderer.theme-github {
  color: #24292f;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
}

/* ============ 学术主题 ============ */
.markdown-renderer.theme-academic {
  color: #1a1a1a;
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.8;
}

/* ============ 简约主题 ============ */
.markdown-renderer.theme-minimal {
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.7;
}

/* ============ 优雅主题 ============ */
.markdown-renderer.theme-elegant {
  color: #2d3748;
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.75;
}

/* ============ 默认主题标题样式 ============ */
.theme-default :deep(h1),
.theme-default :deep(h2),
.theme-default :deep(h3),
.theme-default :deep(h4),
.theme-default :deep(h5),
.theme-default :deep(h6) {
  margin: 1.5em 0 0.5em 0;
  font-weight: 600;
  line-height: 1.3;
  color: #2c3e50;
}

.theme-default :deep(h1) {
  font-size: 2em;
  border-bottom: 2px solid #42b883;
  padding-bottom: 0.5em;
}

.theme-default :deep(h2) {
  font-size: 1.5em;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 0.3em;
}

.theme-default :deep(h3) {
  font-size: 1.25em;
}

/* ============ GitHub主题标题样式 ============ */
.theme-github :deep(h1),
.theme-github :deep(h2),
.theme-github :deep(h3),
.theme-github :deep(h4),
.theme-github :deep(h5),
.theme-github :deep(h6) {
  margin: 24px 0 16px 0;
  font-weight: 600;
  line-height: 1.25;
  color: #24292f;
}

.theme-github :deep(h1) {
  font-size: 2em;
  border-bottom: 1px solid #d1d9e0;
  padding-bottom: 0.3em;
  margin-bottom: 16px;
}

.theme-github :deep(h2) {
  font-size: 1.5em;
  border-bottom: 1px solid #d1d9e0;
  padding-bottom: 0.3em;
  margin-bottom: 16px;
}

.theme-github :deep(h3) {
  font-size: 1.25em;
}

.theme-github :deep(h4) {
  font-size: 1em;
}

.theme-github :deep(h5) {
  font-size: 0.875em;
}

.theme-github :deep(h6) {
  font-size: 0.85em;
  color: #656d76;
}

/* ============ 学术主题标题样式 ============ */
.theme-academic :deep(h1),
.theme-academic :deep(h2),
.theme-academic :deep(h3),
.theme-academic :deep(h4),
.theme-academic :deep(h5),
.theme-academic :deep(h6) {
  margin: 2em 0 1em 0;
  font-weight: bold;
  line-height: 1.2;
  color: #1a1a1a;
  text-align: left;
}

.theme-academic :deep(h1) {
  font-size: 2.2em;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 0.5em;
  text-align: center;
  margin-bottom: 1.5em;
}

.theme-academic :deep(h2) {
  font-size: 1.6em;
  border-bottom: 1px solid #2c3e50;
  padding-bottom: 0.3em;
}

.theme-academic :deep(h3) {
  font-size: 1.3em;
}

/* ============ 简约主题标题样式 ============ */
.theme-minimal :deep(h1),
.theme-minimal :deep(h2),
.theme-minimal :deep(h3),
.theme-minimal :deep(h4),
.theme-minimal :deep(h5),
.theme-minimal :deep(h6) {
  margin: 2em 0 1em 0;
  font-weight: 300;
  line-height: 1.1;
  color: #333;
}

.theme-minimal :deep(h1) {
  font-size: 2.5em;
  font-weight: 200;
  letter-spacing: -0.02em;
}

.theme-minimal :deep(h2) {
  font-size: 1.8em;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.theme-minimal :deep(h3) {
  font-size: 1.4em;
  font-weight: 400;
}

/* ============ 优雅主题标题样式 ============ */
.theme-elegant :deep(h1),
.theme-elegant :deep(h2),
.theme-elegant :deep(h3),
.theme-elegant :deep(h4),
.theme-elegant :deep(h5),
.theme-elegant :deep(h6) {
  margin: 1.8em 0 0.8em 0;
  font-weight: 500;
  line-height: 1.3;
  color: #2d3748;
}

.theme-elegant :deep(h1) {
  font-size: 2.2em;
  text-align: center;
  border-bottom: 3px double #8b5a3c;
  padding-bottom: 0.5em;
  color: #8b5a3c;
}

.theme-elegant :deep(h2) {
  font-size: 1.6em;
  border-bottom: 1px solid #d69e2e;
  padding-bottom: 0.3em;
  color: #8b5a3c;
}

.theme-elegant :deep(h3) {
  font-size: 1.3em;
  color: #8b5a3c;
}

/* ============ 通用样式 ============ */
.markdown-renderer :deep(p) {
  margin: 1em 0;
}

.markdown-renderer :deep(strong) {
  font-weight: 600;
}

.markdown-renderer :deep(em) {
  font-style: italic;
}

/* ============ 列表样式 - 按主题定制 ============ */
.markdown-renderer :deep(ul),
.markdown-renderer :deep(ol) {
  margin: 1em 0;
  padding-left: 2em;
}

.markdown-renderer :deep(li) {
  margin: 0.25em 0;
}

.theme-github :deep(li) {
  margin: 0.25em 0;
}

.theme-academic :deep(li) {
  margin: 0.4em 0;
}

.theme-minimal :deep(li) {
  margin: 0.5em 0;
  font-weight: 300;
}

.theme-elegant :deep(li) {
  margin: 0.3em 0;
}

/* ============ 代码样式 - 按主题定制 ============ */
.theme-default :deep(pre) {
  background: #f8f9fa;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

.theme-github :deep(pre) {
  background: #f6f8fa;
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

.theme-academic :deep(pre) {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.theme-minimal :deep(pre) {
  background: #f9f9f9;
  border: none;
  border-left: 4px solid #ddd;
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.theme-elegant :deep(pre) {
  background: #fdf6e3;
  border: 1px solid #eee8d5;
  border-radius: 8px;
  padding: 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
  font-family: 'Consolas', 'Monaco', monospace;
}

.markdown-renderer :deep(code) {
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.theme-default :deep(code) {
  background: #f1f3f4;
  color: #d73a49;
}

.theme-github :deep(code) {
  background: rgba(175, 184, 193, 0.2);
  color: #d73a49;
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

.theme-academic :deep(code) {
  background: #f5f5f5;
  color: #c7254e;
  border: 1px solid #e1e1e8;
}

.theme-minimal :deep(code) {
  background: #f5f5f5;
  color: #666;
}

.theme-elegant :deep(code) {
  background: #fdf6e3;
  color: #b58900;
  border: 1px solid #eee8d5;
}

/* ============ 引用样式 - 按主题定制 ============ */
.theme-default :deep(blockquote) {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 4px solid #42b883;
  background: #f8f9fa;
  color: #666;
  font-style: italic;
}

.theme-github :deep(blockquote) {
  margin: 0 0 16px 0;
  padding: 0 1em;
  border-left: 0.25em solid #d1d9e0;
  color: #656d76;
}

.theme-academic :deep(blockquote) {
  margin: 1.5em 2em;
  padding: 1em 1.5em;
  border-left: 5px solid #2c3e50;
  background: #f9f9f9;
  color: #555;
  font-style: italic;
  position: relative;
}

.theme-academic :deep(blockquote):before {
  content: '"';
  font-size: 4em;
  color: #ddd;
  position: absolute;
  left: 0.2em;
  top: -0.2em;
  font-family: Georgia, serif;
}

.theme-minimal :deep(blockquote) {
  margin: 2em 0;
  padding: 0 0 0 2em;
  border-left: 2px solid #ddd;
  color: #777;
  font-weight: 300;
  font-style: normal;
}

.theme-elegant :deep(blockquote) {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid #d69e2e;
  background: #fdf6e3;
  color: #8b5a3c;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

/* ============ 链接样式 - 按主题定制 ============ */
.theme-default :deep(a) {
  color: #42b883;
  text-decoration: underline;
  transition: color 0.2s;
}

.theme-default :deep(a):hover {
  color: #369870;
}

.theme-github :deep(a) {
  color: #0969da;
  text-decoration: none;
}

.theme-github :deep(a):hover {
  text-decoration: underline;
}

.theme-academic :deep(a) {
  color: #2c3e50;
  text-decoration: underline;
}

.theme-academic :deep(a):hover {
  color: #1a252f;
}

.theme-minimal :deep(a) {
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  transition: border-color 0.3s;
}

.theme-minimal :deep(a):hover {
  border-bottom-color: #333;
}

.theme-elegant :deep(a) {
  color: #8b5a3c;
  text-decoration: none;
  border-bottom: 1px dotted #d69e2e;
  transition: all 0.3s;
}

.theme-elegant :deep(a):hover {
  color: #d69e2e;
  border-bottom-style: solid;
}

/* ============ 表格样式 - 按主题定制 ============ */
.markdown-renderer :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.theme-default :deep(table) {
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  overflow: hidden;
}

.theme-github :deep(table) {
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  overflow: hidden;
}

.theme-academic :deep(table) {
  border-top: 2px solid #2c3e50;
  border-bottom: 2px solid #2c3e50;
}

.theme-minimal :deep(table) {
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.theme-elegant :deep(table) {
  border: 2px solid #d69e2e;
  border-radius: 8px;
  overflow: hidden;
}

.markdown-renderer :deep(th),
.markdown-renderer :deep(td) {
  padding: 0.75em 1em;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
}

.theme-github :deep(th),
.theme-github :deep(td) {
  padding: 6px 13px;
  border: 1px solid #d1d9e0;
}

.theme-github :deep(th) {
  background: #f6f8fa;
  font-weight: 600;
}

.theme-academic :deep(th) {
  background: #2c3e50;
  color: white;
  font-weight: bold;
  text-align: center;
}

.theme-academic :deep(td) {
  border-bottom: 1px solid #ddd;
}

.theme-minimal :deep(th) {
  background: none;
  font-weight: 300;
  border-bottom: 2px solid #ddd;
  color: #333;
}

.theme-minimal :deep(td) {
  border-bottom: 1px solid #eee;
  font-weight: 300;
}

.theme-elegant :deep(th) {
  background: #fdf6e3;
  color: #8b5a3c;
  font-weight: 500;
  border-bottom: 1px solid #d69e2e;
}

.theme-elegant :deep(td) {
  border-bottom: 1px solid #eee8d5;
}

/* ============ 分割线样式 ============ */
.theme-default :deep(hr) {
  margin: 2em 0;
  border: none;
  border-top: 2px solid #e1e1e1;
}

.theme-github :deep(hr) {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #d1d9e0;
}

.theme-academic :deep(hr) {
  margin: 3em 0;
  border: none;
  border-top: 2px solid #2c3e50;
}

.theme-minimal :deep(hr) {
  margin: 3em 0;
  border: none;
  border-top: 1px solid #ddd;
}

.theme-elegant :deep(hr) {
  margin: 2.5em 0;
  border: none;
  border-top: 2px solid #d69e2e;
  position: relative;
}

.theme-elegant :deep(hr):after {
  content: '❦';
  position: absolute;
  left: 50%;
  top: -0.7em;
  transform: translateX(-50%);
  background: white;
  padding: 0 1em;
  color: #d69e2e;
  font-size: 1.2em;
}

/* ============ 图片样式 ============ */
.markdown-renderer :deep(img) {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}

.theme-default :deep(img) {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-github :deep(img) {
  border-radius: 6px;
  box-shadow: none;
}

.theme-academic :deep(img) {
  border: 1px solid #ddd;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-minimal :deep(img) {
  border: none;
  box-shadow: none;
}

.theme-elegant :deep(img) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid #fdf6e3;
}

/* ============ 深色模式适配 ============ */
.dark-mode.theme-default {
  color: #e6e6e6;
}

.dark-mode.theme-github {
  color: #c9d1d9;
}

.dark-mode.theme-academic {
  color: #e6e6e6;
}

.dark-mode.theme-minimal {
  color: #e6e6e6;
}

.dark-mode.theme-elegant {
  color: #e6e6e6;
}

/* 深色模式下的通用样式调整 */
.dark-mode :deep(p) {
  color: #e6e6e6 !important;
}

.dark-mode :deep(h1),
.dark-mode :deep(h2),
.dark-mode :deep(h3),
.dark-mode :deep(h4),
.dark-mode :deep(h5),
.dark-mode :deep(h6) {
  color: #ffffff !important;
}

.dark-mode :deep(strong) {
  color: #ffffff !important;
}

.dark-mode :deep(em) {
  color: #f0f0f0 !important;
}

.dark-mode :deep(li) {
  color: #e6e6e6 !important;
}

.dark-mode :deep(pre) {
  background: #1e1e1e !important;
  border-color: #3d3d3d !important;
  color: #e6e6e6 !important;
}

.dark-mode :deep(code) {
  background: #2d2d2d !important;
  color: #ff7b72 !important;
  border-color: #3d3d3d !important;
}

.dark-mode :deep(blockquote) {
  background: #1e1e1e !important;
  color: #d0d0d0 !important;
  border-color: #42b883 !important;
}

.dark-mode :deep(a) {
  color: #58a6ff !important;
}

.dark-mode :deep(a):hover {
  color: #79c0ff !important;
}

.dark-mode :deep(table) {
  border-color: #3d3d3d !important;
  background: #1e1e1e !important;
}

.dark-mode :deep(th),
.dark-mode :deep(td) {
  border-color: #3d3d3d !important;
  color: #e6e6e6 !important;
}

.dark-mode :deep(th) {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

.dark-mode :deep(tr:hover) {
  background: rgba(66, 184, 131, 0.1) !important;
}

.dark-mode :deep(hr) {
  border-top-color: #3d3d3d !important;
}

/* ============ 错误和空内容样式 ============ */
.markdown-renderer :deep(.empty-content),
.markdown-renderer :deep(.error-content) {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 2em;
}

.markdown-renderer :deep(.error-content) {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
  border: 1px solid rgba(245, 108, 108, 0.3);
  border-radius: 6px;
}
</style>